<template>
  <div>
    <van-nav-bar
      title="找攻略"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
        v-model="sear"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    <div class="list_box" v-if="sear_list">
      <van-card
        v-for="(v,k) in sear_list"
        :desc="v.s_title"
        :title="v.s_name"
        :thumb="v.s_icon"
        :key="k"
        @click="$router.push({path:'/details',query:{id:v.s_id}})"
      >
        <template #footer>
          <div class="img">
            <img :src="v.s_userIcon"/>
          </div>
          {{v.s_userName}}
        </template>
      </van-card>
    </div>
    <div class="empty_box" v-else>
      <van-empty :description="tips" />
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        sear:'',
        sear_list:null,
        tips:'请输入搜索关键词'
      }
    },methods:{
      onClickLeft:function(){
        this.$router.push({path:'/'});
      },
      onCancel:function(val){
        this.sear='';

        this.sear_list=null;

        this.tips='请输入搜索关键词'
      },
      onSearch:function(val){
        var that=this

        if(val==''){
          return this.$toast.fail('请输入搜索关键词');
        }

        var toast_load=this.$toast.loading({
          message: '查找中...',
          forbidClick: true,
          duration:0
        });

        this.$axios.post('/index.php/strategy/sear_btn',this.$qs.stringify({sear:this.sear})).then(
          (res)=>{
            if(res.data.code==1){
              toast_load.clear();

              that.sear_list=res.data.data.list;
            }else{
              toast_load.clear();

              that.sear_list=null;

              that.tips='未搜索到结果'

              that.$toast.fail(res.data.msg);
            }
          }
        ).catch(
          (res)=>{
            that.$toast.fail('网络繁忙,稍后再试');
          }
        )
      }
    }
  }
</script>

<style scoped>
  .img{
    display:inline-block;
    width:50rem;
    height:50rem;
    border-radius: 50rem;
    overflow: hidden;
    margin: 0 10rem ;
  }
  .img img{
    width:50rem;
    height:50rem;
  }
  .van-card .van-card__title{
    font-size:28rem;
    padding-bottom:30rem;
  }
  .van-card .van-card__desc{
    font-size:24rem;
  }
  .van-card .van-card__footer{
    display:flex;
    align-items: center;
    text-align: right;
    justify-content:flex-end
  }
  .sear_box{
    width:670rem;
    height:56rem;
    text-align: center;
    display:flex;
    align-items: center;
    padding:0 20rem;
    background:#F2F2F2;
    border-radius:10rem;
    margin:auto;
    margin-top:10rem;
  }
  .sear_box i{
    font-size:34rem;
    font-weight: bold;
    color:#6E6E6E
  }
  .sear_box input{
    border:0;
    background:#F2F2F2;
    font-size:24rem;
    margin-left:10rem;
  }
</style>
